<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h2>事件绑定(ms-on-*)</h2>
<p>之前的章节许多示例代码也或多或少地展示了如何使用ms-click来绑定事件了。能直接在模板上绑定是事件，这也是静态模板与动态绑定的一大区别。ms-click不是简单的onclick的别名，它在内部屏蔽了浏览器的差异，并且对许多浏览器暂时不支持的事件做了兼容处理。</p>

<p>总的来说，事件绑定是使用ms-on-☆绑定来实现，但avalon也提供了许多快捷方式，让用户能直接以ms-eventName调用那些常用事件，如下</p>

<blockquote>
    <p>animationend、  blur、  change、  input、 click、 dblclick、 focus、 keydown、 keypress、 keyup、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 scan、 scroll、 submit</p>
</blockquote>

<p>事件绑定的属性值的格式，必须是函数名或函数名后＋小括号(ms-on-click="aaa.fn"是不被允许的)。
    小括号不是必须的。它用于添加参数，并且有一个特殊的<code>$event</code>参数，指向事件对象。如果不写小括号，默认第一个参数就是事件对象。</p>
<div class="alert alert-danger" role="alert">
    <p>注意:ms-duplex与ms-input不能用在同一元素上。</p>
</div>
<p>IE6-8下，事件对象的许多属性与方法与标准浏览器不一样，不过放心，avalon已经帮你修正了。详见下面源码：</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:javascript;gutter:false;toolbar:false'>function fixEvent(event) {
    var ret = {}
    for (var i in event) {
        ret[i] = event[i]
    }
    var target = ret.target = event.srcElement
    if (event.type.indexOf("key") === 0) {
        ret.which = event.charCode != null ? event.charCode : event.keyCode
    } else if (/mouse|click/.test(event.type)) {
        var doc = target.ownerDocument || DOC
        var box = doc.compatMode === "BackCompat" ? doc.body : doc.documentElement
        ret.pageX = event.clientX + (box.scrollLeft >> 0) - (box.clientLeft >> 0)
        ret.pageY = event.clientY + (box.scrollTop >> 0) - (box.clientTop >> 0)
        ret.wheelDeltaY = ret.wheelDelta
        ret.wheelDeltaX = 0
    }
    ret.timeStamp = new Date - 0
    ret.originalEvent = event
    ret.preventDefault = function() { //阻止默认行为
        event.returnValue = false
    }
    ret.stopPropagation = function() { //阻止事件在DOM树中的传播
        event.cancelBubble = true
    }
    return ret
}</pre></div>
<p>avalon的事件绑定支持<code>多投事件机制</code>（同一个元素可以绑定N个同种事件，如ms-click=fn, ms-click-1=fn2, ms-click-2=fn3）</p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;ms-on&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var model = avalon.define({
            $id: "test",
            firstName: "司徒",
            array: ["aaa", "bbb", "ccc"],
            argsClick: function(e, a, b) {
                alert([].slice.call(arguments).join(" "))
            },
            loopClick: function(a, e) {
                alert(a + "  " + e.type)
            },
            status: "",
            callback: function(e) {
                model.status = e.type
            },
            field: "",
            check: function(e) {
                model.field = this.value + "  " + e.type
            },
            submit: function() {
                var data = model.$model
                if (window.JSON) {
                    setTimeout(function() {
                        alert(JSON.stringify(data))
                    })
                }
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;fieldset ms-controller="test"&gt;
        &lt;legend&gt;有关事件回调传参&lt;/legend&gt;
        &lt;div ms-mouseenter="callback" ms-mouseleave="callback"&gt;{{status}}
            &lt;br/&gt;
            &lt;input ms-on-input="check" /&gt;{{field}}
        &lt;/div&gt;
        &lt;div ms-click="argsClick($event, 100, firstName)"&gt;点我&lt;/div&gt;
        &lt;div ms-each-el="array"&gt;
            &lt;p ms-click="loopClick(el, $event)"&gt;{{el}}&lt;/p&gt;
        &lt;/div&gt;
        &lt;button ms-click="submit"&gt;点我&lt;/button&gt;
    &lt;/fieldset&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;/code&gt;</pre></div>

<p><img src="../../assets/css/directives/on/1409902096503-click.gif"  /></p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;ms-on&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var count = 0
        var model = avalon.define({
            $id: "multi-click",
            str1: "1",
            str2: "2",
            str3: "3",
            click0: function() {
                model.str1 = "xxxxxxxxx" + (count++)
            },
            click1: function() {
                model.str2 = "xxxxxxxxx" + (count++)
            },
            click2: function() {
                model.str3 = "xxxxxxxxx" + (count++)
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;一个元素绑定多个同种事件的回调&lt;/legend&gt;
        &lt;div ms-controller="multi-click"&gt;
            &lt;div ms-click="click0" ms-click-1="click1" ms-click-2="click2"&gt;请点我&lt;/div&gt;
            &lt;div&gt;{{str1}}&lt;/div&gt;
            &lt;div&gt;{{str2}}&lt;/div&gt;
            &lt;div&gt;{{str3}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;/code&gt;</pre></div>

<p><img src="../../assets/css/directives/on/1409902480576-click2.gif"  /></p>

<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;ms-on&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define({
            $id: "xxx",
            fn: function() {
                console.log("11111111")
            },
            fn1: function() {
                console.log("2222222")
            },
            fn2: function() {
                console.log("3333333")
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="xxx" ms-on-mouseenter-3="fn" ms-on-mouseenter-2="fn1" ms-on-mouseenter-1="fn2" style="width:100px;height:100px;background: red;"&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;/code&gt;</pre></div>

<p><img src="../../assets/css/directives/on/1409902782256-click3.gif" /></p>
<div class="alert alert-success" role="alert">
    <p>avalon已经对ms-mouseenter, ms-mouseleave进行修复，可以在<a href="http://bl.ocks.org/mbostock/5247027">这里</a>与<a href="http://stackoverflow.com/questions/6130737/mouseenter-without-jquery">这里</a>了解这两个事件。到chrome30时，所有浏览器都原生支持这两个事件。</p>
</div>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;ms-mouseenter, ms-mouseleave&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        avalon.define({
            $id: "test",
            fn1: function(e) {
                console.log(e.type)
                console.log(this)
            },
            fn2: function(e) {
                console.log(e.type)
                console.log(this)
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body ms-controller="test"&gt;
    &lt;div ms-mouseenter="fn1" ms-mouseleave="fn2" style="background: red;width:200px;height: 200px;padding:20px;"&gt;
        &lt;div style="background: blue;width:160px;height: 160px;margin:20px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;/code&gt;</pre></div>

<p><img src="../../assets/css/directives/on/1409903572570-click4.gif"  /></p>
<div class="alert alert-success" role="alert">
    <p>最后是mousewheel事件的修改，主要问题是出现firefox上，它死活也不愿意支持mousewheel，在avalon里是用DOMMouseScroll或wheel实现模拟的。我们在事件对象通过wheelDelta属性是否为正数判定它在向上滚动。</p>
</div>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;ms-on-mousewheel&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var model = avalon.define({
            $id: "test",
            text: "",
            callback: function(e) {
                model.text = e.wheelDelta + "  " + e.type
            }
        })
    &lt;/script&gt;
&lt;/head&gt;

&lt;body ms-controller="test"&gt;
    &lt;div ms-on-mousewheel="callback" id="aaa" style="background: red;width:200px;height: 200px;"&gt;
        {{text}}
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;/code&gt;</pre></div>

<p><img src="../../assets/css/directives/on/1409904002238-click5.gif" /></p>

<div class="bs-callout bs-callout-info" id="callout-alerts-dismiss-use-button">
    <h4>如何解除ms-on-*, ms-click等绑定的事件回调?</h4>
    <div>抱歉地告诉你，不能。不过我们可以用另一个折衷的方式达到相同的效果。</div>
</div>
<p>看一下面的例子：</p>
<div ms-skip style='background:rgb(237,237,237);padding:4px;'><pre class='brush:html;gutter:false;toolbar:false'>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;script src="avalon.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var vm = avalon.define({
            $id: "test",
            fn: function() {
                alert(1)
            }
        })
        setTimeout(function() {
            vm.fn = function() {
                alert(2)
            }
        }, 3000)
        setTimeout(function() {
            vm.fn = function() {
                alert(3)
            }
        }, 6000)
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div ms-controller="test"&gt;
        &lt;button type="button" ms-click="fn"&gt;点击&lt;/button&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</pre></div>
<p><img src="../../assets/css/directives/on/click6.gif"  /></p>
<p>换言之，你想解除某个事件，就直接将VM中对应的函数置换为<code>空函数</code>就行了！</p>
<p>此外avalon还对input，animationend事件进行修复，大家也可以直接用avalon.bind, avalon.fn.bind来绑定这些事件。但建议都用ms-on绑定来处理。</p>


</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

